/* 栅格布局（媒体查询变量）
* $xs <768px  响应式栅格
* $sm ≥768px  响应式栅格
* $md ≥992px  响应式栅格
* $lg ≥1200px 响应式栅格
* $xl ≥1920px 响应式栅格
------------------------------- */
$xs: 576px;
$sm: 768px;
$md: 992px;
$lg: 1200px;
$xl: 1920px;

$media:(
    'xs':576px, //页面宽度576px
    'sm':768px, //页面宽度768px
    'md':992px, //页面宽度992px
    'lg':1200px,//页面宽度1200px
    'xl':1920px,//页面宽度1920px
);

/*当小于某个界面宽度时不显示*/
@each $key,$value in $media{
    .#{$key}-none{
        @media screen and (min-width:#{$value}) {
            display: none  !important;
        };
    }
}


/* 页面宽度小于576px
------------------------------- */
@media screen and (max-width: $xs) {
}

/* 页面宽度小于768px
------------------------------- */
@media screen and (max-width: $sm) {
}
/* 页面宽度大于768px
------------------------------- */
@media screen and (min-width: $sm) {
    .ant-col-md-1, .ant-col-md-2, .ant-col-md-3, .ant-col-md-4, .ant-col-md-5, .ant-col-md-6, .ant-col-md-7, .ant-col-md-8, .ant-col-md-9, .ant-col-md-10, .ant-col-md-11, .ant-col-md-12, .ant-col-md-13, .ant-col-md-14, .ant-col-md-15, .ant-col-md-16, .ant-col-md-17, .ant-col-md-18, .ant-col-md-19, .ant-col-md-20, .ant-col-md-21, .ant-col-md-22, .ant-col-md-23, .ant-col-md-24 {
        display: block;
        box-sizing: border-box;
        flex: 0 0 auto;
        float: left;
    }
    .ant-col-md-6{
        width: 25% !important;
    }
}

/* 页面宽度大于768px小于992px
------------------------------- */
@media screen and (min-width: $sm) and (max-width: $md) {
}

/* 页面宽度大于992px小于1200px
------------------------------- */
@media screen and (min-width: $md) and (max-width: $lg) {
}

/* 页面宽度大于1920px
------------------------------- */
@media screen and (min-width: $xl) {
}

